<script lang="ts" setup>
  import { ref, watch, onMounted, onUnmounted } from 'vue';
  import MEcharts from '/@/components/MEcharts/MEcharts.vue';
  import * as echarts from 'echarts/core';
  const props = defineProps({
    graphDataAI: Array<any>,
    graphDataMM: Array<any>,
    graphDataPLC: Array<any>,
    xdata: Array<any>,
  });

  const chartRef = ref();
  const option = ref<any>({
    grid: {
      top: '8%',
      left: '8%',
      right: '8%',
      bottom: '20%',
    },
    // animation: false,
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' }, //阴影
    },
    xAxis: {
      data: [],
      type: 'category',
      axisLabel: {
        color: '#fff',
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
      },
      z: 10,
    },
    yAxis: {
      color: '#fff',
      name: 'mm',
      nameTextStyle: {
        color: '#fff',
        fontSize: 12,
      },
      boundaryGap: ['0', '10%'],
      axisLine: {
        show: true,
      },
      axisTick: {
        show: true,
      },
      axisLabel: {
        color: '#fff',
      },
      splitLine: {
        show: false,
      },
      scale: true,
    },
    visualMap: {
      show: false,
      pieces: [
        {
          gte: 0,
          lte: 1000,
          color: '#FD0100',
        },
      ],
      outOfRange: {
        color: '#00FF00',
      },
    },
    series: [
      {
        type: 'line',
        name: 'AI实时温度曲线',
        data: [],
        lineStyle: {
          width: 1,
          color: '#00baff',
        },
        itemStyle: {},
        force: {
          layoutAnimation: false,
        },
        symbolSize: 1,
        smooth: false, //曲线or折线
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(0, 186, 255, 0.6)' },
            { offset: 1, color: 'rgba(0, 186, 255, 0.1)' },
          ]),
        },
        // markLine: {
        //   symbol: 'none',
        //   data: [
        //     {
        //       yAxis: 0,
        //       lineStyle: {
        //         // color: '#FFD700',
        //         color: '#fff',
        //         width: 1,
        //       },
        //       label: {
        //         formatter: '下限',
        //         // color: '#FFD700',
        //         color: '#fff',
        //       },
        //     },
        //     {
        //       yAxis: 0,
        //       lineStyle: {
        //         // color: '#00FF00',
        //         color: '#fff',
        //         width: 1,
        //       },
        //       label: {
        //         formatter: '上限',
        //         // color: '#00FF00',
        //         color: '#fff',
        //       },
        //     },
        //   ],
        // },
      },
      {
        type: 'line',
        name: '实时温度曲线MM',
        data: [],
        lineStyle: {
          width: 1,
          color: '#f4c74f',
        },
        itemStyle: {},
        force: {
          layoutAnimation: false,
        },
        symbolSize: 1,
        smooth: false,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(0, 186, 255, 0.6)' },
            { offset: 1, color: 'rgba(0, 186, 255, 0.1)' },
          ]),
        },
        // markLine: {
        //   symbol: 'none',
        //   data: [
        //     {
        //       yAxis: 0,
        //       lineStyle: {
        //         // color: '#FFD700',
        //         color: '#fff',
        //         width: 1,
        //       },
        //       label: {
        //         formatter: '下限',
        //         // color: '#FFD700',
        //         color: '#fff',
        //       },
        //     },
        //     {
        //       yAxis: 0,
        //       lineStyle: {
        //         // color: '#00FF00',
        //         color: '#fff',
        //         width: 1,
        //       },
        //       label: {
        //         formatter: '上限',
        //         // color: '#00FF00',
        //         color: '#fff',
        //       },
        //     },
        //   ],
        // },
      },
      {
        type: 'line',
        name: '实时温度曲线PLC',
        data: [],
        lineStyle: {
          width: 1,
          color: '#2af598',
        },
        itemStyle: {},
        force: {
          layoutAnimation: false,
        },
        smooth: false,
        symbolSize: 1,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(0, 186, 255, 0.6)' },
            { offset: 1, color: 'rgba(0, 186, 255, 0.1)' },
          ]),
        },
        //   markLine: {
        //     symbol: 'none',
        //     data: [
        //       {
        //         yAxis: 0,
        //         lineStyle: {
        //           // color: '#FFD700',
        //           color: '#fff',
        //           width: 1,
        //         },
        //         label: {
        //           formatter: '下限',
        //           // color: '#FFD700',
        //           color: '#fff',
        //         },
        //       },
        //       {
        //         yAxis: 0,
        //         lineStyle: {
        //           // color: '#00FF00',
        //           color: '#fff',
        //           width: 1,
        //         },
        //         label: {
        //           formatter: '上限',
        //           // color: '#00FF00',
        //           color: '#fff',
        //         },
        //       },
        //     ],
        //   },
      },
    ],
  });

  const updateChart = () => {
    option.value.xAxis.data = props.xdata;
    option.value.series[0].data = props.graphDataAI;
    option.value.series[1].data = props.graphDataMM;
    option.value.series[2].data = props.graphDataPLC;

    const graphDataAIMin = Math.min(...(props.graphDataAI ?? [0]));
    const graphDataMMMin = Math.min(...(props.graphDataMM ?? [0]));
    const graphDataPLCMin = Math.min(...(props.graphDataPLC ?? [0]));
    const graphDataAIMax = Math.max(...(props.graphDataAI ?? [0]));
    const graphDataMMMax = Math.max(...(props.graphDataMM ?? [0]));
    const graphDataPLCMax = Math.max(...(props.graphDataPLC ?? [0]));
    option.value.yAxis.min = Math.min(graphDataAIMin, graphDataMMMin, graphDataPLCMin) - 1;
    option.value.yAxis.max = Math.max(graphDataAIMax, graphDataMMMax, graphDataPLCMax) + 1;
  };

  watch(
    () => {
      return props.graphDataAI?.length;
    },
    () => {
      updateChart();
    }
  );

  onMounted(() => {
    // 确保在 DOM 加载完成后更新图表
    setTimeout(() => {
      updateChart();
    }, 1000);

    // 添加窗口大小变化监听
    window.addEventListener('resize', updateChart);
  });

  onUnmounted(() => {
    // 移除窗口大小变化监听
    window.removeEventListener('resize', updateChart);
  });
</script>

<template>
  <div ref="chartRef" class="chart-container">
    <m-echarts :option="option"></m-echarts>
  </div>
</template>

<style scoped>
  .chart-container {
    /* width: 800px;
    height: 300px; */
    width: 100%;
    height: 100%;
  }
</style>
